<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="page-index">
		<uni-popup ref="popup" :mask-click="false"  type="bottom" :safe-area='false' @touchmove.stop.prevent="" @change="change">
			<view class="center-box">
				<view class="top-box">
					<view style="flex: 1;"></view>
					<view class="title-box">
						选择工序
					</view>
					<view class="close-box" @click="close()">
						<image class="icon" src="../../static/login/close.png" mode=""></image>
					</view>
				</view>
				<view class="add-input">
					<view style="width: 100%;">
						<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入工序" clearButton="auto" cancelButton="none" @confirm="search" @clear="clear" v-model="brandname"/>
					</view>
				</view>
				<scroll-view  scroll-y="true" style="height: 945rpx;">
					<view class="list-box">
						<view class="item-box" v-for="(item,index) in brandList" :key="index" @click="select(item)">
							<view class="" v-if="item.code">
								工序编码：{{item.code}}
							</view>
							<view class="" v-if="item.name">
								工序名称：{{item.name}}
							</view>
							<view class="" v-if="item.goodsCode">
								产品编码：{{item.goodsCode}}
							</view>
							<view class="" v-if="item.goodsName">
								产品名称：{{item.goodsName}}
							</view>
							<view class="" v-if="item.goodsModel">
								产品型号：{{item.goodsModel}}
							</view>
							<view class="" v-if="item.gongxuName">
								生产产品名称：{{item.gongxuName}}
							</view>
							<view class="" v-if="item.gongxuModel">
								生产产品型号：{{item.gongxuModel}}
							</view>
							<view class="" v-if="item.shuoming">
								产品说明：{{item.shuoming}}
							</view>
							<view class="" v-if="item.photo">
								关联设备：{{item.photo}}
							</view>
							<view class="" v-if="item.remark">
								备注：{{item.remark}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import * as index from '@/api/index.js'
	export default {
		name: 'BrandPopup',
		props: {
		},
		data() {
			return {
				brandList:[],
				show:false,
				brandname:''
			}
		},
		created() {

		},
		mounted(){
			// 获取工序
			this.brand_list()
		},
		methods: {
			change(e) {
				this.show = e.show
			},
			// 获取工序列表
			brand_list() {
				index.lnGongxuList({name:this.brandname,orderByColumn:'code',isAsc:'asc',pageNum:1,pageSize:1000}).then(res=>{
					this.brandList = res.rows
				})
			},
			search(res) {
				this.brand_list()
			},
			clear(res) {
				this.brandname = ''
				this.brand_list()
			},
			// 选择
			select(e) {
				// this.$parent.brandSelect(e)
				this.$emit('brandBnt',e)
				this.$refs.popup.close()
			},
			// 打开弹窗
			open() {
				this.$refs.popup.open("bottom")
			},
			// 关闭弹窗
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		.center-box {
			padding: 30rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 0 0;
			.top-box {
				display: flex;
				align-items: center;
				.title-box  {
					flex: 1;
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					text-align: center;
				}
				.close-box {
					flex: 1;
					display: flex;
					align-items: center;
					.icon {
						width: 30rpx;
						height: 30rpx;
						margin-left: auto;
					}
				}
			}
			.add-input {
				margin-top: 50rpx;
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				border-bottom: 2rpx solid #F0F0F0;
				.add {
					margin-left: auto;
					width: 116rpx;
					height: 68rpx;
					background: $uni-btn-color;
					border-radius: 14rpx;
					text-align: center;
					line-height: 68rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
				}
			}
			.list-box {
				.item-box {
					padding-top: 20rpx;
					padding-bottom: 20rpx;
					font-weight: 400;
					font-size: 32rpx;
					color: #333333;
					border-bottom: 2rpx solid #F0F0F0;
				}
			}
		}
	}
</style>
